import React, { useState } from 'react'
import { RefreshControl, SectionList, StatusBar, StyleSheet, Text, View } from 'react-native'

/* 
StatusBar

属性
- animated            bool             指定状态栏的变化是否应以动画形式呈现    backgroundColor, barStyle, hidden
- backgroundColor     color            状态栏的背景色(平台：android)        
- barStyle            color            状态栏文本的颜色
- hidden              bool             隐藏状态栏
- translucent         bool             指定状态栏是否透明 (平台：android)

方法
- popStackEntry()         删除最后一条
- pushStackEntry()        添加到最后一条
- replaceStackEntry()     替换
- setBackgroundColor()    设置状态栏的背景色。仅限 Android
- setBarStyle()           设置状态栏的样式


SectionList (继承了所有的ScrollView的属性)
- sections              渲染的数据 类似于FlatList中的data属性。
- initialNumToRender    初始化渲染的值
- keyExtractor          指定key
- renderItem            渲染函数
....
基本与 FlatList 一致
文档 https://www.reactnative.cn/docs/0.72/sectionlist#sections

*/


import { SectionData } from '../../constants/Data';


export default function SectionListDemo() {

  const [refreshing, setRefreshing] = useState(false);

  const renderItem = ({ item, index, section }: any) => {
    return (
      <Text style={styles.txt}>{item}</Text>
    );
  };

  const ListHeader = (
    <View style={styles.header}>
      <Text style={styles.extraTxt}>列表头部</Text>
    </View>
  );

  const ListFooter = (
    <View style={[styles.header, styles.footer]}>
      <Text style={styles.extraTxt}>列表尾部</Text>
    </View>
  );

  const renderSectionHeader = ({ section }: any) => {
    return (
      <Text style={styles.sectionHeaderTxt}>{section.type}</Text>
    );
  }




  return (
    <View style={styles.root}>
      <StatusBar
        barStyle='light-content'
        backgroundColor='transparent'
        animated={true}
        translucent={true}
        hidden={false}
      />
      <SectionList
        style={styles.sectionList}
        sections={SectionData}
        renderItem={renderItem}
        keyExtractor={(item, index) => `${item}-${index}`}
        contentContainerStyle={styles.containerStyle}
        showsVerticalScrollIndicator={true} // 显示滚动条
        onScroll={(event) => {
          // console.log(event.nativeEvent.contentOffset.y);
        }}
        keyboardDismissMode='on-drag'
        keyboardShouldPersistTaps='handled'
        ListHeaderComponent={ListHeader}
        ListFooterComponent={ListFooter}
        renderSectionHeader={renderSectionHeader}
        ItemSeparatorComponent={() =>
          <View style={styles.separator} />
        }
        stickySectionHeadersEnabled={true} // 粘在顶部的效果 ios默认有
        // 实现上拉刷新效果 
        refreshControl={
          <RefreshControl
            refreshing={refreshing} // 刷新图标
            onRefresh={() => {
              console.log('onRefresh ...');
              setRefreshing(true);
              // do request new data
              setTimeout(() => {
                setRefreshing(false);
              }, 1000);
            }}
          />
        }
        // 当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。
        onEndReached={() => {
          console.log('onEndReached ...');
          // do request next page data
        }}
        onEndReachedThreshold={0.2}
      />
    </View>
  )
}


const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
  },
  sectionList: {
    width: '100%',
    height: '100%',
  },
  txt: {
    width: '100%',
    height: 56,
    fontSize: 20,
    color: '#333333',
    textAlignVertical: 'center',
    paddingLeft: 16,
  },
  containerStyle: {
    // paddingHorizontal: 16,
    // paddingTop: 20,
    backgroundColor: '#F5F5F5'
  },
  header: {
    width: '100%',
    height: 48,
    backgroundColor: '#0000ff80',
    justifyContent: 'center',
    alignItems: 'center',
  },
  footer: {
    backgroundColor: '#ff000030',
  },
  extraTxt: {
    fontSize: 20,
    color: '#666666',
    textAlignVertical: 'center',
  },
  sectionHeaderTxt: {
    width: '100%',
    height: 36,
    backgroundColor: '#DDDDDD',
    textAlignVertical: 'center',
    paddingLeft: 16,
    fontSize: 20,
    color: '#333333',
    fontWeight: 'bold',
  },
  separator: {
    width: '100%',
    height: 2,
    backgroundColor: '#D0D0D0',
  },
});